<template>
    <div class="head-container">
        <el-tree
                ref="treeRef"
                :data="deptList"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :props="defaultProps"
                default-expand-all
                highlight-current
                node-key="id"
                @node-click="handleNodeClick"
        />
    </div>
</template>

<script lang="ts" setup>
import {ElTree} from 'element-plus'
import * as DeptApi from '@/api/system/dept'
import {defaultProps, handleTree} from '@/utils/tree'

defineOptions({name: 'SystemUserDeptTree'})

const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
const getTree = async () => {
    const res = await DeptApi.getSimpleDeptList()
    deptList.value = []
    deptList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
    if (!name) return true
    return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
    emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/** 初始化 */
onMounted(async () => {
    await getTree()
})
</script>
